<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css?t=a1">
   <style>
      .el-header {
         background-color: #B3C0D1;
         color: #333;
         line-height: 60px;
      }

      .el-aside {
         color: #333;
      }

      html,
      body,
      #app,
      .el-container {
         padding: 0px;
         margin: 0px;
         height: 100%;
      }

      .my-layout-admin {
         position: fixed;
         top: 80px;
         left: 0px;
         right: 0px;
         bottom: 0px;
      }

      .mydmin-iframe {
         position: absolute;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
      }

      /* 菜单后面小三角的图标颜色 */
      .el-submenu__title i {
         color: #eee;
      }
   </style>
</head>

<body>
   <div id="app">

      <!--修改密码dialog-->
      <el-dialog title="修改密码" :visible.sync="dialogRepasswordVisible" :close-on-click-modal="false" width="50%">
         <div style="height:160px;overflow-y:auto;">
            <el-form ref="repasswordForm" :model="repasswordData" :rules="rules" label-width="120px" size="mini"
               style="margin-right: 30px;">
               <el-col :span="24">
                  <el-form-item label="原密码" prop="oldPassword">
                     <el-input show-password v-model="repasswordData.oldPassword"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword1">
                     <el-input show-password v-model="repasswordData.newPassword1"></el-input>
                  </el-form-item>
                  <el-form-item label="重复新密码" prop="newPassword2">
                     <el-input show-password v-model="repasswordData.newPassword2"></el-input>
                  </el-form-item>
               </el-col>
            </el-form>
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogRepasswordVisible = false">取 消</el-button>
            <el-button @click="submitRepassword" type="primary">确 定
            </el-button>
         </div>
      </el-dialog>


      <el-container style="height: 100%; border: 0px solid #eee;">

         <el-container>
            <el-header height="80px" style="background-color: #409eff;">

               <div style="color:#FEFEFE;padding-top: 10px;float:left;">
                  <div style="margin:0px 0px 0px 0px;font-size: 1.2rem;">
                     {{sysconfig.appName}}
                  </div>
               </div>

               <div style="float:left;margin-left: 120px;">
                  <el-button type="primary" style="width: 90px;margin-top: 3px;" :disabled="butFocusName == 'home'"
                     @click="btnEvent('home')"><i class="el-icon-monitor" style="font-size: 1.5rem;"></i>
                     <div style="margin-top: 10px;margin-left: -4px;">首 页</div>
                  </el-button>
                  <el-button type="primary" style="width: 90px;margin-top: 3px;" :disabled="butFocusName == 'organ'"
                     @click="btnEvent('organ')"><i class="el-icon-data-analysis" style="font-size: 1.5rem;"></i>
                     <div style="margin-top: 10px;margin-left: -4px;">机构查询</div>
                  </el-button>
                  <el-button type="primary" style="width: 90px;margin-top: 3px;" :disabled="butFocusName == 'student'"
                     @click="btnEvent('student')"><i class="el-icon-user" style="font-size: 1.5rem;"></i>
                     <div style="margin-top: 10px;margin-left: -4px;">学员查询</div>
                  </el-button>
                  <el-button type="primary" style="width: 90px;margin-top: 3px;" :disabled="butFocusName == 'offline'"
                     @click="btnEvent('offline')"><i class="el-icon-edit-outline" style="font-size: 1.5rem;"></i>
                     <div style="margin-top: 10px;margin-left: -4px;">线下学习</div>
                  </el-button>
                  <el-button type="primary" style="width: 90px;margin-top: 3px;" :disabled="butFocusName == 'examine'"
                     @click="btnEvent('examine')"><i class="el-icon-finished" style="font-size: 1.5rem;"></i>
                     <div style="margin-top: 10px;margin-left: -4px;">学习审核</div>
                  </el-button>
                  <el-button type="primary" style="width: 90px;margin-top: 3px;" :disabled="butFocusName == 'api'"
                     @click="btnEvent('api')"><i class="el-icon-sort" style="font-size: 1.5rem;"></i>
                     <div style="margin-top: 10px;margin-left: -4px;">接口文档</div>
                  </el-button>
                  <el-button type="primary" style="width: 90px;margin-top: 3px;" :disabled="butFocusName == 'settings'"
                     @click="btnEvent('settings')"><i class="el-icon-setting" style="font-size: 1.5rem;"></i>
                     <div style="margin-top: 10px;margin-left: -4px;">系统设置</div>
                  </el-button>
               </div>


               <div style="float:right;margin-top: 10px;">
                  <el-dropdown style="color:#eee;font-size:1.0rem;" trigger="click" @command="handleCommand">
                     <span class="el-dropdown-link">
                        <span class="el-icon-user"> {{memberData.name}} </span><i
                           class="el-icon-arrow-down el-icon--right"></i>
                     </span>
                     <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="repassword" icon="el-icon-setting">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                     </el-dropdown-menu>
                  </el-dropdown>
                  <el-button type="text" size="small" @click="logout"
                     style="margin-left:20px;color:#eee;font-size:1.1rem;" class="el-icon-switch-button"> 退出登录
                  </el-button>
               </div>

            </el-header>

            <el-main style="padding: 3px;">
               <div class="my-layout-admin">
                  <iframe :src="iframe_uri" frameborder="0" class="mydmin-iframe"></iframe>
               </div>
            </el-main>
         </el-container>
      </el-container>
   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>

<script>
   var vm = new Vue({
      el: '#app',
      data: function () {
         var validatePass = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请再次输入密码'));
            } else if (value !== this.repasswordData.newPassword1) {
               callback(new Error('两次输入密码不一致!'));
            } else {
               callback();
            }
         };
         return {
            sysconfig: {},                      // 系统配置  
            memberData: {},                     // 用户的登录信息
            dialogRepasswordVisible: false,     // 是否显示重置密码对话框
            repasswordData: {},                 // 重置密码表单数据
            butFocusName: 'home',               // 当前按钮焦点 （home, student, organ, offline, examine, api, settings）
            iframe_uri: '/html/admin/welcome.html',                     // 框架页面地址


            // 表单中的数据验证规则
            rules: {
               oldPassword: [
                  { required: true, trigger: 'blur', message: '该值不能为空' },
                  { min: 6, max: 20, trigger: 'blur', message: '长度在 6 到 20 个字符' }
               ],
               newPassword1: [
                  { required: true, trigger: 'blur', message: '该值不能为空' },
                  { min: 6, max: 20, trigger: 'blur', message: '长度在 6 到 20 个字符' }
               ],
               newPassword2: [
                  { required: true, trigger: 'blur', validator: validatePass }
               ]
            },

         }
      },
      computed: {
      },
      methods: {

         // 下拉菜单事件
         handleCommand(command) {
            if (command === 'logout') {
               this.logout();
            } else if (command === 'repassword') {
               this.repasswordData = {},
                  this.dialogRepasswordVisible = true;
            }

         },

         // 退出登录
         logout() {

            axios.get('/api/guest/user/logout.bu')
               .then(function (response) {
                  if (response.data.code > 0) {
                     window.location.href = "login.html";
                  } else if (response.data.code == -1) {
                     window.location.href = "login.html";
                  } else {
                     vm.$message.error(response.data.msg);
                  }
               })
               .catch(function (error) {
                  vm.$message.error('注销失败！' + error);
                  window.location.href = "login.html";
               })
         },

         // 提交重置密码信息
         submitRepassword() {
            this.$refs.repasswordForm.validate((valid) => {
               if (valid) {
                  axios.post('/api/admin/sys/edit_password.bu', this.repasswordData)
                     .then(function (response) {
                        if (response.data.code > 0) {
                           vm.$message.success(response.data.msg);
                           vm.dialogRepasswordVisible = false;
                        } else {
                           vm.$message.error(response.data.msg);
                        }
                     })
                     .catch(function (error) {
                        vm.$message.error('错误：' + error);
                     })
               } else {
                  vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
                  return false;
               }
            });
         },

         // 按钮事件
         btnEvent(name) {
            this.butFocusName = name;

            if (this.butFocusName === 'student') {
               this.iframe_uri = '/html/admin/student/student_index.html';
            } else if (this.butFocusName === 'organ') {
               this.iframe_uri = '/html/admin/organ/organ_index.html';
            } else if (this.butFocusName === 'offline') {
               this.iframe_uri = '/html/admin/offline/offline_index.html';
            } else if (this.butFocusName === 'api') {
               this.iframe_uri = '/html/admin/api_help/api_help_index.html';
            } else if (this.butFocusName === 'examine') {
               this.iframe_uri = '/html/admin/examine/examine_index.html';
            } else if (this.butFocusName === 'settings') {
               this.iframe_uri = '/html/admin/sys/sys_index.html';
            } else {
               this.butFocusName = 'home';
               this.iframe_uri = '/html/admin/welcome.html';
            }

         },
      },
   });



   // 自动执行，读取菜单数据等
   new function () {

      // 获取系统配置信息
      axios.get('/api/guest/base/sysconfig.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.sysconfig = response.data.bundle;
            } else {
               vm.sysconfig = {};
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });

      // 用户信息
      axios.get('/api/admin/sys/get_member_data.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.memberData = response.data.bundle;
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取登录信息失败！' + error);
         })

      // 读取参数信息至缓存
      axios.get('/api/admin/sys/get_option_params.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               console.log(response);
               sessionStorage.setItem('optionData', JSON.stringify(response.data.bundle));
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取菜单数据失败！' + error);
         })

   };

</script>

</html>